<template>
  <view class="user-info">
        <view class="user-ava">
            <view class="ava-bor">
                <fui-avatar :src="avatar"></fui-avatar>
            </view>
            <view @click="clickStatus" class="follow"> 
                <fui-icon size="65" :name="seelctStatus"></fui-icon>
            </view>
            <text>{{userInfo.realname}}</text>
        </view>
        <view class="user-time">
            <view @click="selectIndex = index" class="item-select" 
            :class="selectIndex === index ? 'select-color': ''" :key="item.text" v-for="(item,index) in selectContent">
                <fui-icon color="#fff" size="45" :name="item.ioc"></fui-icon>
                <view>{{item.text}}</view>
            </view>
        </view>
  </view>
  <view class="user-tip">
    所有作品均在下方，请仔细查找，点击可下载无水印高清原图。
  </view>
</template>

<script setup lang="ts">
import  type{ IGetUserInfoByCodeResponse } from "@/api/model/dyUserCodeModel";
interface IProps {
    userInfo:IGetUserInfoByCodeResponse 
}
const props =  withDefaults(defineProps<IProps>(), {})
const avatar = computed(()=>{
    return props.userInfo.avatar
})
const selectIndex = ref(0)
const selectContent = ref([
    {
        text:"默认排序",
        ioc:"checkround"
    },
    {
        text:"日期排序",
        ioc:"calendar"
    }
])
const status = ref(0)
const userStatus = ref([
    'plussign',
    'checkbox'
])
const seelctStatus = computed(()=>{
    return userStatus.value[status.value]
})

const clickStatus = ()=>{
    status.value = status.value === 0 ? 1 : 0
}
</script>

<style lang="scss" scoped>
.user-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25%;
    .user-ava{
        display: flex;
        align-items: center;
        .ava-bor{
            border-radius: 50%;
            border: 7rpx solid #ffffff;
            padding: 5rpx;
            height: 97rpx;
            margin-right: 20rpx;
        }
        .follow{
            position: relative;
            left: -70rpx;
            z-index: 10;
            top: 30rpx;
            background: white;
            border-radius: 50%;
            height: 65rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        text{
            margin-left: -50rpx;
        }
    }
    .user-time{
        display: flex;
        .item-select{
            width: 160rpx;
            height: 56rpx;
            border-radius: 40rpx;
            display: flex;
            font-size: 23rpx;
            align-items: center;
            padding: 2rpx;
            justify-content: center;
        }
        .select-color{
            background: #6327d1;
        }
    }
}
.user-tip{
    margin-top: 20rpx;
    font-size: 23rpx;
}
</style>
